<template>
  <div>
    <a-spin :spinning="spinning">
      <a-row :gutter="16">
        <a-col :span="3">

          <a-card hoverable style="width: 200px;height: 170px;text-align: center">
            <PlusOutlined  type="plus" :style="{ fontSize: '100px', color: '#9e9e9e' }" @click="showModal"/>

            <a-card-meta description="点击这里开始创建应用">
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="3" v-for="app in appList" :key="app.id">
          <a-card hoverable size="small" style="width: 200px;height: 170px;">
            <div>
              <h4 style="float: left">{{ app.name }}</h4>
              <a-dropdown style="float: right">
                <div style="color: #1890ff;float: right;">
                  <a-dropdown trigger="[click]">
                    <a class="ant-dropdown-link" @click.prevent>
                      操作
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a @click="deleteApp(app.id)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;">属性</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>

                <a-menu >
                  <a-menu-item>
                    <div @click="deleteApp(app.id)">删除</div>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>

            <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" @click="appInfo(app)"
                style="height: auto;width: 100%;"
            />
          </a-card>
        </a-col>

      </a-row>

      <a-modal  v-model:visible="visible" title="新建" @ok="handleOk">
        <template>
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" :loading="loading" >
            保存
          </a-button>
        </template>
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="应用名称">
            <a-input v-model:value="form.name"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>


    </a-spin>
  </div>
</template>

<script>
import {AppDefinitionApi} from "@/components/home/lowCode/appDef/js/AppDefinitionApi";
import {defineComponent} from "vue"
import {
  PlusOutlined,
} from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    PlusOutlined
  },
  name: "AppDefinition",
  mixins: [AppDefinitionApi],
  data() {
    return {
      appList: [],
      spinning: true,
      loading: false,
      visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      form: {
        id: '',
        name: '',
      }
    }
  },
  created() {
    this.loadAppData();
  },
  methods: {
    deleteApp(appId){
      this.deleteById(appId).then(() => {
        this.loadAppData();
      });
    },
    appInfo(app) {
      let routeUrl = this.$router.resolve({
        path: "/app_def/info",
        query: {appId:app.id,appName:app.name}
      });
      window.open(routeUrl.href, '_blank');
    },
    loadAppData() {
      this.spinning = true;
      this.getAll().then(data => {
        this.appList = data;
        this.spinning = false;
      })
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.loading = true;
      this.save(this.form).then(() => {
            this.loadAppData();
            this.visible = false;
            this.loading = false;
          }, message => {
            this.$message.warning(message);
          }
      )
    },
    handleCancel() {
      this.visible = false;
    }
  }
})
</script>

<style scoped>

</style>
